<template>
  <header class="site-header">
    <div class="container">
      <div class="logo">
        <router-link to="/">悦而启思</router-link>
      </div>
      <nav class="main-navigation">
        <ul>
          <li><router-link to="/" class="nav-link" active-class="active" exact>首页</router-link></li>
          <li><router-link to="/services" class="nav-link" active-class="active">服务项目</router-link></li>
          <li><router-link to="/portfolio" class="nav-link" active-class="active">作品案例</router-link></li>
          <li><router-link to="/about" class="nav-link" active-class="active">关于我们</router-link></li>
          <li><router-link to="/contact" class="nav-link" active-class="active">联系方式</router-link></li>
        </ul>
      </nav>
      <!-- <div class="header-actions">
        <button class="cta-button">
          <span>浏览作品</span>
          <svg class="arrow-icon" width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path d="M8 12L12 8L8 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
      </div> -->
    </div>
  </header>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'SiteHeader',
});
</script>

<style lang="scss" scoped src="./Header.scss"></style>